<template>
<div class="app-container">
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
  <el-form-item label="主贴ID">
    <el-input clearable size="small" v-model="formInline.id" placeholder="请输入主贴ID"></el-input>
  </el-form-item>
  <el-form-item label="用户ID">
    <el-input clearable size="small" v-model="formInline.uid" placeholder="请输入用户ID"></el-input>
  </el-form-item>
  <el-form-item label="用户昵称">
    <el-input clearable size="small" v-model="formInline.uName" placeholder="请输入用户昵称"></el-input>
  </el-form-item>
  <!-- <el-form-item label="话题">
    <el-select clearable size="small" v-model="formInline.tagName" placeholder="请选择话题">
      <el-option
        v-for="(item,index) in threadTagList"
        :key="index"
        :label="item.label"
        :value="item.label">
      </el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="是否精华">
    <el-select clearable size="small" v-model="formInline.isQuintessence" placeholder="请选择是否精华主贴">
      <el-option
        v-for="item in [{
          value: 1,
          label: '是'
        },{
          value: 0,
          label: '否'
        },]"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="是否置顶">
    <el-select clearable size="small" v-model="formInline.isTop" placeholder="请选择是否置顶主贴">
      <el-option
        v-for="item in [{
          value: 1,
          label: '是'
        },{
          value: 0,
          label: '否'
        },]"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </el-form-item> -->
  <el-form-item>
    <el-button size="small" type="primary" @click="onSubmit">查询</el-button>
    <el-button size="small" @click="reset">重置</el-button>
  </el-form-item>
</el-form>
  <el-table ref="multipleTable" v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row empty-text="暂无数据">
    <!-- <el-table-column label="序号" width="80">
      <template slot-scope="scope">
        {{ scope.row.id }}
      </template>
    </el-table-column> -->
    <el-table-column label="主贴ID" width="110">
      <template slot-scope="scope">
        {{ scope.row.id }}
      </template>
    </el-table-column>
    <!-- <el-table-column :show-overflow-tooltip="true" label="话题名称" width="200">
      <template slot-scope="scope">
        <span>{{ scope.row.tags }}</span>
      </template>
    </el-table-column> -->
    <el-table-column label="用户昵称" width="150">
      <template slot-scope="scope">
        <el-tag @click="goUser(scope.row)" size="small" style="cursor:pointer;">{{ scope.row.nickName }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="点赞数量" width="100">
      <template slot-scope="scope">
        <span>{{ scope.row.praiseNum }}</span>
      </template>
    </el-table-column>
    <el-table-column label="评论数量" width="90">
      <template slot-scope="scope">
        {{ scope.row.commentNum }}
      </template>
    </el-table-column>
    <el-table-column label="状态" width="90">
      <template slot-scope="scope">
        <el-tag v-if="scope.row.state == 0" size="small" type='danger'>禁用</el-tag>
        <el-tag v-else size="small" type='success'>正常</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="发布时间" width="180">
      <template slot-scope="scope">
        {{ scope.row.createTime }}
      </template>
    </el-table-column>
    <el-table-column :show-overflow-tooltip="true" label="内容" width="200">
      <template slot-scope="scope">
        {{ scope.row.content }}
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="350">
      <template slot-scope="scope">
        <el-button @click="goTalk(scope.row)" type="text">评论</el-button>
        <el-divider direction="vertical"></el-divider>
        <el-button @click="openLike(scope.row)" type="text">点赞</el-button>
        <el-divider direction="vertical"></el-divider>
        <el-button @click="toTop(scope.row)" type="text" style="color:#ff0000;" v-if="scope.row.isTop == 0">置顶</el-button>
        <el-button @click="toTop(scope.row)" type="text" style="color:#ff0000;" v-else>取消置顶</el-button>
        <el-divider direction="vertical"></el-divider>
        <el-button @click="toQuintessence(scope.row)" type="text" style="color:#ff0000;" v-if="scope.row.isQuintessence == 0">精华</el-button>
        <el-button @click="toQuintessence(scope.row)" type="text" style="color:#ff0000;" v-else>取消精华</el-button>
        <el-divider direction="vertical"></el-divider>
        <el-button @click="toChangeState(scope.row)" type="text" style="color:#ff0000;" v-if="scope.row.state == 1">禁用</el-button>
        <el-button @click="toChangeState(scope.row)" type="text" style="color:#ff0000;" v-else>解禁</el-button>
        <el-divider direction="vertical"></el-divider>
        <el-popconfirm
          @onConfirm="del(scope.row)"
          confirm-button-text='确定'
          cancel-button-text='取消'
          icon="el-icon-info"
          icon-color="red"
          title="是否删除本条数据？">
            <el-button  slot="reference" type="text" style="color:#ff0000;">删除</el-button>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <div style="margin:10px 0 0 0;text-align:right;">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageObj.pageNum"
      :page-sizes="[10, 30, 50, 100]"
      :page-size="pageObj.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageObj.total">
    </el-pagination>
  </div>

  <el-dialog title="点赞数量" :visible.sync="likeModal">
    <el-form :model="form">
      <el-form-item label="点赞数量" label-width="80px">
        <el-input type="text" v-model="form.likeNum" autocomplete="off" placeholder="请输入点赞数量"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeLike">取 消</el-button>
      <el-button type="primary" @click="confirmLike">确 定</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
import {
  getThreadApi,
  deleteThreadApi,
  getThreadTagApi,
  threadSaveApi,
  threadChangeStateApi
} from '@/api/forum'

export default {
  data() {
    return {
      list: [],
      listLoading: true,
      currentPage: 1,
      formInline: {
        id: '',
        uid: '',
        uName: '',
        tagName: '',
        isTop: '',
        isQuintessence: '',
      },
      pageObj: {
        pageSize: 10,
        pageNum: 1,
        total: 0
      },
      threadTagList: [],
      likeModal: false,
      likeObj: {},
      form: {
        likeNum: ''
      }
    }
  },
  created() {
    if(this.$route.query.tid) {
      this.formInline.id = this.$route.query.tid
    }
    this.fetchData()
    this.getThreadTag()
  },
  methods: {
    goTalk(row) {
      this.$router.push({
        path: '/forum/talk',
        query: {
          tid: row.id
        }
      })
    },
    goUser(row) {
      this.$router.push({
        path: '/users/list',
        query: {
          nickName: row.nickName
        }
      })
    },
    openLike(row) {
      this.likeModal = true
      this.likeObj = row
    },
    closeLike() {
      this.likeModal = false
      this.form.likeNum = ''
    },
    confirmLike() {
      if(this.form.likeNum) {
        threadSaveApi({
          id: this.likeObj.id,
          praiseNum: this.form.likeNum
        }).then((res) => {
          this.closeLike()
          this.fetchData()
        })
      }else {
        this.$message.error('请输入点赞数量！');
      }
    },
    reset() {
      this.formInline.isTop = ''
      this.formInline.tagName = ''
      this.formInline.uName = ''
      this.formInline.uid= ''
      this.formInline.isQuintessence = ''
      this.formInline.id = ''
      this.pageObj.pageNum = 1
      this.pageObj.pageSize = 10
      this.fetchData()
    },
    del(row) {
      deleteThreadApi({
        ids: row.id
      }).then((res) => {
        this.fetchData()
      })
    },
    toTop(row) {
      threadSaveApi({
        id: row.id,
        isTop: row.isTop == 0?1:0
      }).then((res) => {
        this.fetchData()
      })
    },
    toQuintessence(row) {
      threadSaveApi({
        id: row.id,
        isQuintessence: row.isQuintessence == 0?1:0
      }).then((res) => {
        this.fetchData()
      })
    },
    toChangeState(row) {
      threadChangeStateApi({
        id: row.id,
        state: row.state == 0?1:0
      }).then((res) => {
        this.fetchData()
      })
    },
    onSubmit() {
      this.fetchData()
    },
    fetchData() {
      this.listLoading = true
      getThreadApi({
        id: this.formInline.id,
        pageSize: this.pageObj.pageSize,
        pageNum: this.pageObj.pageNum,
        state: this.formInline.state,
        uid: this.formInline.uid,
        uName: this.formInline.uName,
        tagName: this.formInline.tagName,
        isTop: this.formInline.isTop,
        isQuintessence: this.formInline.isQuintessence,
        type: 'thread',
      }).then(response => {
        this.listLoading = false
        this.list = response.data.result
        this.pageObj.total = response.data.total
      })
    },
    getThreadTag() {
      getThreadTagApi({
        pageSize: 100,
        pageNum: 1,
        state: 1,
        type: 'thread',
      }).then((response) => {
        this.threadTagList = response.data.result.map((item, index) => {
          return {
            value: item.id,
            label: item.name
          }
        })
      })
    },
    handleSizeChange(val) {
      this.pageObj.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.pageObj.pageNum = val
      this.fetchData()
    }
  }
}
</script>
